<template>
	<view class="content">
		<map :latitude="latitude" :longitude="longitude" :markers="markers" scale="10" class="map" @callouttap="markertap"></map>
		<view class="menuBox">
			<view class="mapMenuItem" v-for="(item,index) in menu" :key="index" @click="changeMenu(index)">
				<image :src="baseurl+item.url" class="mapMenuIcon"></image>
				<text class="mapMenuLabel" :class="index==type?'active':''">{{item.name}}</text>
				<view class="menuLine" v-if="index==type"></view>
			</view>
		</view>
		<view class="dataBox">
			<view class="dataItem" v-for="(item,index) in content[type].projectAreaFacility" :key="index">
				<view class="dataItemLeft">
					<view class="dot"></view>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="dataItemRight">
					<image :src="baseurl+'project/address.png'" class="addressIcon"></image>
					<text class="distance">{{item.distance}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import QQMapWX from "@/common/qqmap-wx-jssdk.min.js" //引入sdk
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				content: '',
				menu: [{
						name: '交通',
						url: 'project/traffic.png'
					},
					{
						name: '商业',
						url: 'project/business.png'
					},
					{
						name: '医疗',
						url: 'project/medical.png'
					},
					{
						name: '教育',
						url: 'project/education.png'
					}
				],
				id: '',
				type: 0,
				markers: [],
				addressArr:'',
				latitude:'',
				longitude:''
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.type= options.type;
			this.latitude= options.latitude;
			this.longitude= options.longitude;
			// this.id = 20;
			// this.type= 3;
			this.getData();
		},
		methods: {
			markertap(e){
				console.log(e);
			},
			//查看大图
			big(url) {
				let arr = [];
				arr.push(url)
				uni.previewImage({
					loop: true,
					urls: arr, //可以展示imgUrl 列表中所有的图片
				});
			},
			getData() {
				this.markers=[];
				this.$request.get(`ProjectAreaImg/area_img_list?id=${this.id}`).then(res => {
					this.content = res.data.data;
					 this.addressArr = this.content[this.type].projectAreaFacility;
					for (let i = 0; i < this.addressArr.length; i++) {
						console.log(i);
						this.markers.push({ // 获取返回结果，放到mks数组中
							id: parseInt(this.addressArr[i].id),
							title: this.addressArr[i].name,
							latitude: this.addressArr[i].latitude,
							longitude: this.addressArr[i].longitude,
							width: 20,
							height: 30,
							address: this.addressArr[i].name,
							callout: {
								content: this.addressArr[i].name,
								color: '#ffffff',
								bgColor: '#4173FA',
								borderWidth: 1,
								borderColor: '#8a8a8a',
								fontSize: 12,
								padding: 10,
								borderRadius: 5,
								display: 'ALWAYS'
							},
						});
					}
				})
			},
			changeMenu(num) {
				this.type = num;
				this.getData();
			}
		}
	}
</script>

<style lang="scss">
	.dataBox {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 80rpx;
		position: relative;

		.dataItem {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;
			position: relative;

			.dataItemLeft {
				display: flex;
				align-items: center;

				.dot {
					width: 10rpx;
					height: 10rpx;
					background-color: #4e97ad;
					border-radius: 50%;
				}

				.name {
					margin-left: 25rpx;
					width: 450rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 25rpx;

				}
			}

			.dataItemRight {
				display: flex;
				align-items: center;

				.addressIcon {
					width: 20rpx !important;
					height: 26rpx !important;
				}

				.distance {
					margin-left: 25rpx;
					color: #919191;
					font-size: 25rpx;
				}
			}
		}
	}

	.mapMenuItem {
		width: 90rpx;
		// height: 135rpx;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		align-items: center;

		.mapMenuIcon {
			width: 90rpx;
			height: 90rpx;
		}

		.mapMenuLabel {
			width: 100%;
			font-size: 28rpx;
			text-align: center;
			margin-top: 30rpx;
		}

		.menuLine {
			width: 60rpx;
			height: 5rpx;
			background-color: #4e97ad;
			margin-top: 15rpx;
		}

		.active {
			color: #4e97ad;
		}
	}

	.menuBox {
		width: 640rpx;
		// height: 155rpx;
		margin-left: 55rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.map {
		width: 670rpx;
		height: 516rpx;
		margin-left: 40rpx;
		margin-top: 30rpx;
		border-radius: 15rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
</style>